<template>
  <div class="history">
    <el-timeline>
      <el-timeline-item :timestamp="history.date" placement="top" color="#95d475" v-for="history in histories"
        :key="history.date">
        <!-- <el-card>
          <div class="item" v-for="item in history.data" :key="item.path">
            <el-link class="name">{{ item.path }}</el-link>
            <p class="time">{{ formatTime(item.History.createdAt) }}</p>
          </div>
        </el-card> -->
        <el-table ref="multipleTableRef" :data="history.data" style="width: 100%" >
          <el-table-column width="40">
            
          </el-table-column>
          <el-table-column label="时间" width="100">
            <template #default="scope">{{ formatTime(scope.row.History.createdAt) }}</template>
          </el-table-column>
          <el-table-column label="路径">
            <template #default="scope">
              <div class="link">
                <el-link class="name" @click="linkClick(scope.row)">{{ scope.row.path }}</el-link>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="120">
            <template #default="scope">
              <el-link class="name" type="danger" @click="deleteItem(scope.row)">删除</el-link>
            </template>
          </el-table-column>
        </el-table>
      </el-timeline-item>
    </el-timeline>

    <el-empty :image-size="200" description="暂无历史记录" v-if="histories.length === 0"/>
  </div>
</template>

<script setup lang="ts">
// @ts-ignore
import { ElMessage } from "element-plus"
import { getHistory, deleteHistory } from "../api/history"
import { ref } from "vue"
import { useRouter } from "vue-router"

const router = useRouter()
const histories = ref<any[]>([])



function formatTime(time: string) {
  let t = new Date(time).toLocaleTimeString()
  t = t.split(":").slice(0, 2).join(":")
  return t
}

function linkClick(row: any) {
  console.log(row);
  router.push(`/video/${row.id}`)
}

function deleteItem(row: any) {
  console.log(row.History.id);
  deleteHistory(row.History.id).then(res => {
    ElMessage({
      type: "success",
      message: res.data,
    })
    getHistories()
  })
}


function getHistories() {
  getHistory().then(res => {
    histories.value = res.data
  })
}
getHistories()


</script>
<style lang="scss">
.history {
  width: 90%;
  margin: 30px auto;

  .link {
    cursor: pointer;
  }

  .el-timeline-item__content {
    overflow: hidden;
    border-radius: 10px;
  }

  .el-timeline-item__timestamp {
    color: #333;
    font-size: 16px;
  }

  .item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 20px 0;

    &:last-child {
      margin: 0;
    }

    &:first-child {
      margin: 0;
    }

    .name {
      word-break: break-all;
      font-size: 16px;
    }

    .time {
      margin: 0 0 0 20px;
      color: #646464;
      font-size: 16px;
    }
  }

}
</style>